<template>
  <div class="login-container">
    <!-- navbar -->
    <van-nav-bar class="app-nav-bar" title="登录" left-arrow @click-left="$router.back()" />

    <!-- 登录表单 -->
     <van-form ref="login" validate-first  :show-error="false" :show-error-message="false" @submit="onLogin" @failed="onFailed">
        <van-field v-model="user.mobile" name="mobile" icon-prefix="toutiao" left-icon="shouji" center placeholder="请输入手机号" :rules="formRules.mobile"/>
        <van-field v-model="user.code" name="code" clearable icon-prefix="toutiao" left-icon="yanzhengma" center placeholder="请输入验证码" :rules="formRules.code">
          <template #button>
            <van-count-down v-if="isCountDownShow" :time="1000*60"  format="ss s" @finish="isCountDownShow=false,disabled=false"/>
            <van-button v-else class="send-btn" size="mini" :disabled="disabled" round @click.prevent="onSendSms">发送验证码</van-button>
          </template>
        </van-field>

        <!-- 登录按钮 -->
        <div class="login-btn-wrap">
          <van-button class="logiin-btn" type="info" block>登录</van-button>
        </div>
     </van-form>

  </div>
</template>

<script>
import { login, sendSms } from '@/api/user'
import { Toast } from 'vant'

export default {
  name: 'login',
  data () {
    return {
      // 登录参数
      user: {
        mobile: '13911111111',
        code: '246810'
      },
      // 检验规则
      formRules: {
        mobile: [{ required: true, message: '请输入手机号' }, { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '手机号格式错误' }],
        code: [{ required: true, message: '请输入验证码' }, { pattern: /^\d{6}$/, message: '验证码格式错误' }]
      },
      // 倒计时和按钮显示状态
      isCountDownShow: false,
      // 按钮是否禁用
      disabled: false
    }
  },

  methods: {
    async onLogin () {
      Toast.loading({
        message: '登陆中...',
        forbidClick: true,
        duration: 0
      })
      try {
        const res = await login(this.user)
        console.log(res)
        Toast.success('登录成功')
        this.$store.commit('SETUSER', res.data.data)
        this.$router.back()
      } catch (error) {
        console.log(error)
        console.log('111')
        Toast.fail('登录失败，手机号或者验证码错误')
      }
    },

    // 校验失败提示
    onFailed (err) {
      // console.log(err);
      if (err.errors[0]) {
        this.$toast({
          message: err.errors[0].message,
          position: 'top'
        })
      }
    },

    // 发送验证码
    async onSendSms () {
      try {
        await this.$refs.login.validate('mobile')
        await sendSms(this.user.mobile)
        // console.log(res);
        this.isCountDownShow = true
      } catch (err) {
        let message = ''
        if (err && err.response && err.response.status === 429) {
          message = '发送太频繁了，请稍后重试'
        } else if (err.name === 'mobile') {
          message = err.message
        } else {
          message = '发送失败，请稍后重试'
        }
        this.$toast({
          message,
          position: 'top'
        })
      }

      this.disabled = true
    }
  }
}
</script>

<style lang="less" scoped>
.login-container{
.login-btn-wrap{
  padding: 26px 16px;

  .logiin-btn{
    background-color: #6db4fb;
    border: none;

    .van-button__text{
      font-size: 15px;
    }
  }
}

.send-btn{
  width: 76px;
  height: 26px;
  background-color: #ededed;
  .van-button__text{
    color: #666666;
    font-size: 11px;
  }
}
}

</style>
